var myApp=angular.module('MyApp',[]);

myApp.controller('MainCtrl',[
	'$scope',
	function ($scope,$rootScope){
		
	}
]);

//=====================指令================================================
// 作用：1.添加后按下鼠标不放可以移动div元素
//       2.双击被添加的元素可以alert显示当前css的，top与left值，元素的长宽像素 
// 使用示范：1.<move-video></move-video>
//			 2.<div move-video></div>
//==============================================================================

myApp.directive('moveVideo',function(){
	// Runs during compile
	return {
		// name: '',
		// priority: 1,
		// terminal: true,
		// scope: {}, // {} = isolate, true = child, false/undefined = no change
		// controller: function($scope, $element, $attrs, $transclude) {},
		// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
		 restrict: 'EA', // E = Element, A = Attribute, C = Class, M = Comment
		// template: '',
		// templateUrl: '',
		// replace: true,
		// transclude: true,
		// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
		link: function($scope, iElm, iAttrs, controller) {
			//单击鼠标时alert显示出当前的top与left值，元素的长宽像素
			
			iElm.bind('click',function(e){
				var left=iElm.css('left');//angular的css只能作用在内部样式，要用到外部样式就引入jquery
				var top=iElm.css('top');
				var width=iElm.css('width');
				var height=iElm.css('height');
				alert("left:"+left+";top:"+top+";width:"+width+";height:"+height);
			});
			//鼠标按下时可以拖动
			var hasbind=false;//变量用了避免异步处理中还没unbind又bind了
			iElm.bind('mousedown',function(e){
				var downLeft=parseInt(iElm.css('left'));//转化为整型,滑块的当前高
				var downPageX=e.pageX;//按下鼠标时的pagey
				var downTop=parseInt(iElm.css('top'));//转化为整型,滑块的当前高
				var downPageY=e.pageY;//按下鼠标时的pagey
				//鼠标移动
				if (!hasbind) {//只有当前没有绑定才绑定，避免了多次绑定
					iElm.bind('mousemove',a=function(e){
						console.log('bind');
						var currentLeft=e.pageX-downPageX+downLeft;//更新left值
						var currentTop=e.pageY-downPageY+downTop;//更新top值
						iElm.css('left',currentLeft+'px');//更新css显示
						iElm.css('top',currentTop+'px');//更新css显示
					});
				}
			});
			//松开鼠标就解除绑定
			iElm.bind('mouseup',function(e){
				console.log("unbind");
				hasbind=false;
				iElm.unbind('mousemove',a);
			});
		}
	};
});